<template >
    <div>
        <Card>
            <TreeTable ref="table" :data="list" :columns="columns" :expand-type="false">
                <template slot="likes" slot-scope="scope">
                    <Button type="primary" class="menu-btn" @click="handleButton(scope.row.ID)">按钮</Button>
                </template>
                <template slot="icon" slot-scope="scope">
                    <Icon :type="scope.row.ModuleIcon" size="20" />
                </template>
            </TreeTable>
            <Drawer title="按钮管理" v-model="isDrawer" width="720" :mask-closable="false">
                <Table border :columns="buttonColumns" :data="buttonList"></Table>
            </Drawer>
        </Card>
    </div>
</template>

<script>
/**
 * 系统菜单
 */
import TreeTable from '@/components/TreeTable';
import { cyclicRouting } from '@/util';
import { getModulePermission } from '@/api/user';
import { getTablesList, getButtonList } from './service';

/**
 *  isDrawer 按钮点击
 *  list 表格数据
 *  buttonList 按钮表格数据
 *  buttonColumns 按钮表头数据
 */
export default {
    name: 'SystemMenu',
    components: {
        TreeTable
    },
    data() {
        return {
            isDrawer: false,
            list: [],
            buttonList: [],
            columns: [
                {
                    label: '菜单名称',
                    prop: 'ModuleTitle'
                },
                {
                    label: '菜单编码',
                    prop: 'ModuleEnCode'
                },
                {
                    label: '路由地址',
                    prop: 'LinkUrl'
                },
                {
                    label: '模块归属',
                    prop: 'ModuleType'
                },
                {
                    label: '图标',
                    prop: 'ModuleIcon',
                    type: 'template',
                    template: 'icon'
                },
                {
                    label: '排序',
                    prop: 'SortCode'
                },
                {
                    label: '操作',
                    prop: 'ID',
                    type: 'template',
                    template: 'likes'
                }
            ],
            buttonColumns: [
                {
                    title: '按钮名称',
                    key: 'age'
                },
                {
                    title: '操作',
                    key: 'address'
                }
            ]
        };
    },
    computed: {
        propList() {
            return Object.keys(this.props).map(item => ({
                name: item
            }));
        }
    },
    methods: {
        /* 表格数据请求 */
        getTablesListData() {
            const data = this.search;
            getTablesList(data).then(res => {
                this.list = res.data;
                this.loading = false;
                this.total = res.data.records;
            });
        },
        /* 按钮点击 */
        handleButton(id) {
            getButtonList({
                moduleid: id
            }).then(() => {
                this.isDrawer = true;
            });
        }
    },
    mounted() {
        /* 获取菜单的id */
        cyclicRouting(JSON.parse(sessionStorage.getItem('user')).menuList, this.$route, id => {
            /* 按钮权限请求 */
            getModulePermission({
                roleid: JSON.parse(sessionStorage.getItem('user')).roleid,
                moduleid: id
            }).then(res => {
                /* 按钮权限赋值 */
                for (let item in res.data) {
                    if (res.data[item].name == 'add') {
                        this.isAddBtn = true;
                    } else if (res.data[item].name == 'delete') {
                        this.isDeleteBtn = true;
                    }
                }
                this.getTablesListData();
            });
        });
    }
};
</script>

<style scoped lang="less">
* {
    margin: 0;
    padding: 0;
}
.switch-list {
    margin: 20px 0;
    list-style: none;
    overflow: hidden;
}
.switch-item {
    margin: 20px;
    float: left;
}
.menu-btn {
    padding: 0 5px;
    font-size: 10px;
    background: rgb(90, 177, 239);
    border: none;
    cursor: pointer;
}
</style>